import {defineComponent, ref, computed,} from "vue"
import {NModal, NButton, NCard, NIcon} from "naive-ui"
import {CloseOutlined, FullscreenOutlined} from "@vicons/antd"
import useEditModel from "@/hooks/editModel"
import Flexform, {flexformitem} from "@/components/flexform/index"

export default defineComponent({
    name: "editModel",
    props: {
        close: {
            type: Function,
            default: null,
        },
    },
    setup({close}, {expose, emit}) {
        // 自定义属性
        const formList = ref([
            {
                span: 24,
                label: "考试名称",
                key: "name",
                default: "",
                type: "input",
                placeholder: "请输入考试名称",
                rules: [
                    {required: true, message: "请输入考试名称", trigger: "change"},
                    {min: 2, max: 200, message: "请输入2-200位字符", trigger: "change"},
                ],
            },
            {
                span: 24,
                label: "开始时间",
                key: "startTime",
                default: "",
                type: "picker",
                placeholder: "请输入开始时间",
                rules: [
                    {required: true, message: "请选择考试开始时间", trigger: "change"},
                ],
            },
            {
                span: 24,
                label: "结束时间",
                key: "endTime",
                default: "",
                type: "picker",
                placeholder: "请输入结束时间",
                rules: [
                    {required: true, message: "请选择考试结束时间", trigger: "change"},
                ],
            },
            {
                span: 24,
                label: "考试场地类型",
                key: "changdType",
                default: "",
                type: "select",
                options: [
                    {label: "会议室", value: "0",},
                    {label: "自定义", value: "1",},
                ],
                placeholder: "请输入考试场地类型",
                rules: [
                    {required: true, message: "请选择考试场地类型", trigger: "change"},
                ],
            },
            {
                span: 24,
                label: "会议室选择",
                key: "meet",
                default: "",
                type: "select",
                options: [],
                placeholder: "请选择会议室",
                rules: [
                    {required: true, message: "请选择会议室", trigger: "change"},
                ],
            },
            {
                span: 24,
                label: "考试场地",
                key: "changdi",
                default: "",
                type: "input",
                options: [],
                placeholder: "请输入考试场地",
                rules: [
                    {required: true, message: "请输入考试场地", trigger: "change"},
                ],
            },
            {
                span: 24,
                label: "考试人员",
                key: "users",
                type: "select",
                multiple: true,
                options: [],
                placeholder: "请选择参与考试人员",
                rules: [
                    {required: true, message: "请选择参与考试人员", trigger: "change"},
                ],
            },
            {
                span: 24,
                label: "考试试卷",
                key: "shijuan",
                type: "select",
                multiple: true,
                options: [],
                placeholder: "请选择试卷",
                rules: [
                    {required: true, message: "请选择试卷", trigger: "change"},
                ],
            },
            {
                span: 24,
                label: "描述",
                key: "desc",
                default: "",
                type: "textarea",
                placeholder: "请输入描述",
            },
        ])
        const initform = (data: any) => {
            const item1: any = formList.value.find(el => el.key === "meet")
            const item2: any = formList.value.find(el => el.key === "changdi")
            if (data.changdType === "0") {
                item1.show = true
                item2.show = false
            } else if (data.changdType === "1") {
                item1.show = false
                item2.show = true
            } else {
                item1.show = false
                item2.show = false
            }
        }
        const {
            showModel,
            handleInit,
            handleClose,
            handleReset,
            formValue,
            formRef,
            title,
            editType,
            resultText,
            loading,
        } = useEditModel(initform, null, "", close)
        expose({handleInit, handleClose, handleReset, formValue})
        const formChange = () => {
            initform(formValue.value)
        }
        /******************************************初始化区域********************************************************************/

        const actionSlot = () => (<div class="flex justify-end items-center my-1">
            <NButton onClick={handleClose}>关闭</NButton>
            <NButton class="ml-10px" type={"primary"}>保存</NButton>
        </div>)
        const defaultSlot = () => (<div class="w-full flex flex-col">
            <NCard contentStyle={{padding: 0, width: "600px",}}>
                <Flexform formValue={formValue.value} formList={formList.value} onChange={formChange} labelWidth={120}/>
            </NCard>
        </div>)
        const iconSlot = () => (<div class="w-50px h-20px flex justify-between items-center">
            <NIcon size={20}>
                <CloseOutlined/>
            </NIcon>
            <NIcon size={20}>
                <FullscreenOutlined/>
            </NIcon>
        </div>)
        return () => (
            <div v-myfocus={{value: true}}><NModal show={showModel.value} onUpdateShow={(val) => showModel.value = val}
                                                   preset={"dialog"} title={title.value} showIcon={false}
                                                   loading={loading.value}
                                                   v-slots={{action: actionSlot, default: defaultSlot, icon: iconSlot}}>
            </NModal></div>)
    },
})
